<script setup>
import { useEventListener } from '@vueuse/core'
import { Plus } from '@element-plus/icons-vue'
import useEventBus from '@/use/use-event-bus'

const props = defineProps({
  msgId: String,
})

const eventBus = useEventBus()

const openRef = ref()
const tagList = [
  { tag: '已完成', color: '--elp-color-primary' },
  { tag: '进行中', color: '--elp-color-warning' },
  { tag: '待规划', color: '--elp-color-warning' },
  { tag: '待处理', color: '--elp-color-success' },
  { tag: '已验收', color: '--elp-color-success' },
  { tag: '绝了', color: '--elp-color-danger' },
  { tag: '因吹斯汀', color: '--elp-color-danger' },
  { tag: '都可以', color: '--elp-color-primary' },
  { tag: '加油', color: '--elp-color-error' },
  { tag: '很棒', color: '--elp-color-error' },
  { tag: '辛苦了', color: '--elp-color-primary' },
  { tag: '进行中', color: '--elp-color-primary' },
  { tag: '不愧是你', color: '--elp-color-warning' },
  { tag: '妙啊', color: '--elp-color-warning' },
  { tag: '格局打开', color: '--elp-color-primary' },
  { tag: '热烈鼓掌', color: '--elp-color-danger' },
  { tag: '顶梁柱', color: '--elp-color-danger' },
  { tag: '大受震撼', color: '--elp-color-danger' },
  { tag: '高能预警', color: '--elp-color-danger' },
  { tag: '有点东西', color: '--elp-color-primary' },
  { tag: '反对', color: '--elp-color-primary' },
  { tag: '赞成', color: '--elp-color-primary' },
  { tag: 'YYDS', color: '--elp-color-success' },
  { tag: '收到', color: '--elp-color-success' },
]

const visible = ref(false)

const position = ref({
  left: 0,
  top: 0,
})

const style = computed(() => {
  return {
    left: `${position.value.left}px`,
    top: `${position.value.top}px`,
  }
})
function open() {
  const { x, y } = openRef.value.getBoundingClientRect()
  position.value.left = x
  position.value.top = y
  visible.value = true

  if (x + 300 > document.body.clientWidth) {
    position.value.left = x - 300
  }
  if (y + 300 > document.body.clientHeight) {
    position.value.top = y - 300
  }
}

onMounted(() => {
  useEventListener('click', () => {
    visible.value = false
  })
})
</script>

<template>
  <div class="message-tag">
    <div ref="openRef" @click.stop="open">
      <slot></slot>
    </div>
    <Teleport to="body">
      <div class="message-tag tag-list" :style="style" v-if="visible">
        <div
          class="tag-item"
          style="background-color: var(--elp-bg-color-page)"
          @click.stop="eventBus.emit('openMsgCustomTag')">
          <el-icon><Plus /></el-icon>
        </div>
        <div
          class="tag-item"
          v-for="(item, index) in tagList"
          :key="index"
          @click="eventBus.emit('addMsgCustomTag', props.msgId, item)"
          :style="{
            color: `var(${item.color})`,
            border: `1px solid var(${item.color}-light-8)`,
            backgroundColor: `var(${item.color}-light-9)`,
          }">
          {{ item.tag }}
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped lang="scss">
.message-tag {
  position: relative;
}
</style>
<style lang="scss">
.message-tag.tag-list {
  display: grid;
  position: absolute;
  height: 300px;
  width: 300px;
  padding: 10px;
  grid-template-columns: repeat(3, 33.33%);
  border-radius: 6px;
  background-color: var(--elp-bg-color);
  z-index: 99;
  .tag-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    height: 20px;
    border-radius: 4px;
    margin-right: 10px;
  }
}
</style>
